<template>
  <div>
    <mt-header fixed title="超级vv系统"></mt-header>
    <transition name="fade" mode="out-in">
      <router-view/>
    </transition>
    <mt-tabbar fixed v-model="selected">
      <mt-tab-item id="home">
        <img slot="icon" src="./assets/img/index.png"> 首页
      </mt-tab-item>
      <mt-tab-item id="member">
        <img slot="icon" src="./assets/img/vip.png"> 会员
      </mt-tab-item>
      <mt-tab-item id="shopcart">
        <img slot="icon" src="./assets/img/shopcart.png"> 购物车
        <mt-badge type="error" size="small">{{num}}</mt-badge>
      </mt-tab-item>
      <mt-tab-item id="search">
        <img slot="icon" src="./assets/img/find.png"> 查找
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import EventBus from './EventBus.js'
import localStorage from './localStorage.js'
export default {
  data () {
    return {
      selected: '',
      num: 0
    }
  },
  created () {
    var _this = this
    _this.num = localStorage.getTotalCount()
    console.log(_this.num)
    EventBus.$on('addToShopcart', function (data) {
      _this.num += data
    })
  },
  watch: {
    selected (newV, oldV) {
      console.log(newV)
      this.$router.push({
        name: newV
      })
    }
  }
}
</script>
<style lang="less">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
